<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">

            <el-table :data="items" size="mini" highlight-current-row @row-click="itemSelect">

                <el-table-column label="默认图标">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.iconPath" style="max-height: 50px; max-width: 50px"></el-image>
                    </template>
                </el-table-column>

                <!-- <el-table-column label="选中图标">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.selectedIconPath" style="max-height: 50px; max-width: 50px"></el-image>
                    </template>
                </el-table-column> -->

                <el-table-column label="按钮文字" prop="text"></el-table-column>

                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        {{ scope.row.enable ? "已启用" : "未启用" }}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="editHandle(scope.row)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>

        <tabberForm @cancle="cancleHandle" @change="changeHandle" ref="bannerform"></tabberForm>

    </div>
</template>
  
<style lang="scss" scoped>
.inline {
    display: flex;
    justify-content: space-between;
}

.icon-uploader .el-upload,
.icon-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 355px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-uploader img {
    width: 355px;
    height: 150px;
}

.icon-uploader .el-upload:hover {
    border-color: #409eff;
}

.app-container {
    .myheader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0px;

        .part-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .block {
                margin-left: 10px;
            }
        }

        .part-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .block {
                margin-right: 10px;
            }
        }

        .el-input {
            width: 250px;
            border-radius: 100%;
        }
    }
}
</style>
  
<script>
// import { getTabbarList, updateTabbar, deleteTabbar } from "@/api/tabbar.js";
// import bannerItemForm from "./bannerItemForm.vue"
import tabberForm from "./tabberForm.vue";
import ImagePicker from "@/components/ImagePicker";
import LinkEditor from "@/components/LinkEditor.vue";
// import NavItem from '../modules/NavItem.vue'
//   import PositionSelector from "@/components/PositionSelector";

export default {
    name: "tabbars",
    components: { ImagePicker, LinkEditor, tabberForm },
    data () {
        return {
            showMore: false,
            cats: [],
            total: 0,
            positionId: null,
            // per_page: 20,
            // page: 1,
            // allItems: [],
            // items: [],
            loading: false,
            currentItem: null,
        };
    },
    props: {},

    computed: {
        submitBtnText () {
            return this.currentItem.id ? "保存" : "创建";
        },
        items: function () {
            return this.$store.state.pagemaker.pageTabbars;
        },
    },

    mounted: function () {
        // this.loadData();
    },

    methods: {
        cancleHandle: function () {
            if (this.currentItem.id) {
                // this.loadData()
                this.$store.dispatch('pagemaker/loadTabbarList')
            }
        },

        changeHandle: function () {
            // this.loading = true
            // this.loadData()
            this.$store.dispatch('pagemaker/loadTabbarList')
            this.currentItem = {}
        },

        newFormHandle: function () {
            var ban = {
                id: null,
            };
            this.$refs.bannerform.openDialog(ban)
        },
        editHandle: function (item) {
            this.$refs.bannerform.openDialog(item)
        },

        itemSelect: function (item) {
            this.currentItem = item;
        },

        deleteHandle: function (itemId) {
            var _this = this;
            this.$confirm("确定要删除这个tabbar吗?", {
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteTabbar(itemId).then((resp) => {
                    _this.currentItem = {};
                    // _this.loadData();
                });
            });
        },



        // loadData: function () {
        //     this.loading = true;
        //     var query = {
        //     };
        //     getTabbarList(query).then((resp) => {
        //         this.items = resp.data.map((item, i) => {
        //             return item;
        //         });
        //         this.total = resp.total;
        //         this.loading = false;
        //     });
        // },
    },
};
</script>
  